<template>
  <div>
    <!-- 地图容器 -->
    <div id="map-container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "LocateTool",
  methods: {
    locate() {
      // 使用 amap-loader 动态加载 AMap 库
      AMapLoader.load({
        key: "f819c82141a53cedf6c86346c694e12f", // 替换为你的高德地图应用key
        version: "2.0", // AMap 版本号
        plugins: ["AMap.Geolocation"], // 需要使用的插件列表
      }).then((AMap) => {
        // AMap 加载完成，可以在这里使用 AMap 组件了
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,
          timeout: 10000,
          buttonOffset: new AMap.Pixel(10, 20),
          zoomToAccuracy: true,
          buttonPosition: "RB",
        });
        // console.log("1");
        // 监听定位完成事件
        AMap.event.addListener(geolocation, "complete", () => {
          // 处理定位成功的逻辑
          // console.log("2");
        });

        // 监听定位出错事件
        AMap.event.addListener(geolocation, "error", () => {
          // 处理定位失败的逻辑
          // console.log("3");
        });

        // 获取当前位置信息
        geolocation.getCurrentPosition();
      });
    },
  },
};
</script>

<style scoped>
#map-container {
  width: 100%;
  height: 300px;
}
</style>
